<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>注册</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  *{margin:0;padding:0;box-sizing:border-box;}
  body{background:#f4f6fa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;}
  .container{max-width:380px;margin:8% auto;background:#fff;padding:2.5rem 2rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);}
  h2{margin-bottom:1.5rem;text-align:center;color:#28a745;}
  .form-group{margin-bottom:1rem;}
  label{display:block;margin-bottom:.4rem;font-weight:500;}
  input{width:100%;padding:.7rem .8rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;}
  input:focus{outline:none;border-color:#28a745;}
  button{width:100%;padding:.7rem;background:#28a745;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;}
  button:hover{background:#218838;}
  .tip{text-align:center;margin-top:1rem;font-size:.9rem;color:#555;}
  .tip a{color:#28a745;text-decoration:none;}
</style>
</head>
<body>
<div class="container">
  <h2>用户注册</h2>
  <form id="regForm">
    <div class="form-group">
      <label>用户名</label>
      <input type="text" id="user" required placeholder="3~15位字母/数字/下划线">
    </div>
    <div class="form-group">
      <label>密码</label>
      <input type="password" id="pwd" required placeholder="6~20位字符">
    </div>
    <div class="form-group">
      <label>确认密码</label>
      <input type="password" id="pwd2" required placeholder="再次输入密码">
    </div>
    <button type="submit">注 册</button>
  </form>
  <p class="tip">已有账号？<a href="login.html">立即登录</a></p>
</div>

<script>
  document.getElementById('regForm').addEventListener('submit',function(e){
    e.preventDefault();
    const u=document.getElementById('user').value.trim();
    const p=document.getElementById('pwd').value.trim();
    const p2=document.getElementById('pwd2').value.trim();
    if(!u||!p){alert('请填写完整');return;}
    if(p!==p2){alert('两次密码不一致');return;}
    // 这里写后端接口调用
    alert('注册成功（前端演示）\n用户名：'+u);
  });
</script>
</body>
</html>